<template>
  <div>
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header" class="clearfix">
        <el-row class="categorySearchWrapper" type="flex" justify="space-between">
          <el-col :span="2">
            <el-button type="primary" size="medium" class="addCategory" @click="addCategory">添加分类</el-button>
          </el-col>
          <el-col :span="12" class="searchCategory">
            <el-input ref="categoryContent" v-model="categoryContent" placeholder="请输入内容" />
            <el-button icon="el-icon-search" @click="selectSomeCategory" />
          </el-col>
        </el-row>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="image"
          label="图片"
        >
          <template #default="{row}">
            {{ row }}
            <img :src="row.src" style="width:50px;height:50px;">
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          label="操作"
        >
          <template #default="{row}">
            {{ row }}
            <el-button type="primary" size="medium" @click="editCategory(row)">编辑</el-button>
            <el-button type="danger" size="medium" @click="deleteCategory(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination_warpper">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pagination_obj.limit"
          :total="pagination_obj.total"
          :current-page="pagination_obj.current_category"
          @current-change="handleCurrentCategory"
        />
      </div>
    </el-card>

    <el-dialog :title="`${formData.id?'编辑':'新增'}分类`" :visible="dialogFormVisible" @close="btnCancle">
      <el-form ref="add_or_edit" :model="formData" :rules="rules">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="formData.title" autocomplete="off" />
        </el-form-item>

        <el-form-item label="介绍" :label-width="formLabelWidth" prop="desc">
          <el-input v-model="formData.desc" autocomplete="off" />
        </el-form-item>

        <el-form-item label="上传图片" :label-width="formLabelWidth">
          <UploadImage ref="getUrl" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancle">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCategoryList,
  getCategoryAmount,
  addCategory,
  deleteCategory,
  editCategory,
  getOneCategory
} from '@/api/modules/category'
import UploadImage from '@/components/upload'
export default {
  components: { UploadImage },
  data() {
    return {
      categoryContent: '',
      tableData: [],
      pagination_obj: {
        total: 0,
        limit: 0,
        startIndex: 0,
        current_category: 1
      },
      formData: {
        title: '',
        src: '',
        desc: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      rules: {
        desc: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.updateCategoryList(2, 0)
  },
  methods: {
    // 更新列表
    // 每页显示、开始的索引
    async updateCategoryList(limit, startIndex) {
      // 绑定数据
      this.pagination_obj.limit = limit
      this.pagination_obj.startIndex = startIndex
      // 获取页面列表
      const { data } = await getCategoryList({
        _limit: limit,
        _start: startIndex,
        title_contains: this.categoryContent
      })
      // 获取页面数量
      const res_Amount = await getCategoryAmount({ title_contains: this.categoryContent })
      this.pagination_obj.total = res_Amount.data
      this.tableData = []
      data.map(item => {
        this.tableData.push({
          title: item.title,
          src: item.image,
          desc: item.desc,
          id: item.id
        })
      })
    },
    handleCurrentCategory(currentCategory) {
      this.pagination_obj.current_category = currentCategory
      this.updateCategoryList(2, (currentCategory - 1) * 2)
    },
    // 筛选
    selectSomeCategory() {
      this.updateCategoryList(2, 0)
      this.pagination_obj.current_category = 1
    },
    // 添加
    addCategory() {
      this.dialogFormVisible = true
    },
    async btnOK() {
      // 新增
      if (!this.formData.id) {
        this.$refs.add_or_edit.validate()
        await addCategory({ ...this.formData, image: this.$refs.getUrl.fileList[0].url })
      } else {
        // 编辑
        await this.$refs.add_or_edit.validate()
        await editCategory({ ...this.formData, image: this.$refs.getUrl.fileList[0].url })
      }
      this.$refs.getUrl.fileList.splice(0, 1)
      this.$message.success('操作成功')
      this.formData = {
        title: '',
        src: '',
        desc: ''
      }
      this.dialogFormVisible = false
      this.updateCategoryList(2, (this.pagination_obj.current_category - 1) * 2)
    },
    btnCancle() {
      this.formData = {
        title: '',
        src: '',
        desc: ''
      }
      this.dialogFormVisible = false
    },
    // 删除
    async deleteCategory(id) {
      await deleteCategory(id)
      this.$message.success('删除成功')
      this.updateCategoryList(2, 0)
    },
    // 编辑
    async editCategory(obj) {
      this.dialogFormVisible = true
      const { data } = await getOneCategory(obj)
      this.formData = {
        title: data.title,
        src: data.image,
        desc: data.desc,
        id: data.id
      }
      this.$refs.getUrl.fileList = [{
        url: this.formData.src
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: calc(100% - 25px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
  .categorySearchWrapper{
    width:100%;
  }
  .searchCategory{
    display: flex;
  }
  .pagination_warpper{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>
